<template>
  <f7-page>
    <f7-navbar title="Flex布局" back-link></f7-navbar>

    <div class="tien-bar bg-white border-bottom ">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>固定尺寸
      </div>
    </div>

    <div class="padding bg-white">
      <div class="flex flex-wrap">
        <div class='flex-20 bg-grey margin-xs padding-sm radius'>xs(20%)</div>
        <div class='flex-40'></div>
        <div class='flex-40 bg-grey margin-xs padding-sm radius'>sm(40%)</div>
        <div class='flex-50'></div>
        <div class='flex-50 bg-grey margin-xs padding-sm radius'>sub(50%)</div>
        <div class='flex-60 bg-grey margin-xs padding-sm radius'>lg(60%)</div>
        <div class='flex-80 bg-grey margin-xs padding-sm radius'>xl(80%)</div>
      </div>
    </div>
    <div class="tien-bar bg-white margin-top border-bottom">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>比例布局
      </div>
    </div>
    <div class="padding bg-white">
      <div class="flex">
        <div class='flex-1 bg-grey padding-sm margin-xs radius'>1</div>
        <div class='flex-1 bg-grey padding-sm margin-xs radius'>1</div>
      </div>
      <div class="flex margin-bottom-sm mb-sm">
        <div class='flex-1 bg-grey padding-sm margin-xs radius'>1</div>
        <div class='flex-2 bg-grey padding-sm margin-xs radius'>2</div>
      </div>
      <div class="flex  margin-bottom-sm mb-sm">
        <div class='flex-1 bg-grey padding-sm margin-xs radius'>1</div>
        <div class='flex-2 bg-grey padding-sm margin-xs radius'>2</div>
        <div class='flex-3 bg-grey padding-sm margin-xs radius'>3</div>
      </div>
    </div>
    <div class="tien-bar bg-white margin-top border-bottom">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>水平对齐(justify)
      </div>
    </div>
    <div class="bg-white">
      <div class="flex border-bottom padding justify-start">
        <div class='bg-grey padding-sm margin-xs radius'>start</div>
        <div class='bg-grey padding-sm margin-xs radius'>start</div>
      </div>
      <div class="flex border-bottom padding justify-end">
        <div class='bg-grey padding-sm margin-xs radius'>end</div>
        <div class='bg-grey padding-sm margin-xs radius'>end</div>
      </div>
      <div class="flex border-bottom padding justify-center">
        <div class='bg-grey padding-sm margin-xs radius'>center</div>
        <div class='bg-grey padding-sm margin-xs radius'>center</div>
      </div>
      <div class="flex border-bottom padding justify-between">
        <div class='bg-grey padding-sm margin-xs radius'>between</div>
        <div class='bg-grey padding-sm margin-xs radius'>between</div>
      </div>
      <div class="flex border-bottom padding justify-around">
        <div class='bg-grey padding-sm margin-xs radius'>around</div>
        <div class='bg-grey padding-sm margin-xs radius'>around</div>
      </div>
    </div>
    <div class="tien-bar bg-white margin-top border-bottom">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>垂直对齐(align)
      </div>
    </div>
    <div class="bg-white">
      <div class="flex border-bottom padding align-start">
        <div class='bg-grey padding-lg margin-xs radius'>ColorUi</div>
        <div class='bg-grey padding-sm margin-xs radius'>start</div>
      </div>
      <div class="flex border-bottom padding align-end">
        <div class='bg-grey padding-lg margin-xs radius'>ColorUi</div>
        <div class='bg-grey padding-sm margin-xs radius'>end</div>
      </div>
      <div class="flex border-bottom padding align-center">
        <div class='bg-grey padding-lg margin-xs radius'>ColorUi</div>
        <div class='bg-grey padding-sm margin-xs radius'>center</div>
      </div>
    </div>

    <div class="tien-bar bg-white margin-top">
      <div class='action'>
        <h2>Grid布局</h2>
      </div>
    </div>

    <div class="tien-bar bg-white border-bottom">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>等分列
      </div>
      <div class='action'></div>
    </div>
    <div class="bg-white padding">
      <div v-for="index in 5" :class=" 'margin-bottom text-center grid col-'+index">
        <div v-for="index in (index)*2"  :class="index%2==0?'bg-cyan':'bg-blue'" class=" padding tien-col"  >{{index}}</div>
      </div>
    </div>
    
    <div class="tien-bar bg-white margin-top border-bottom">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>等高
      </div>
      <div class='action'></div>
    </div>
    <div class="bg-white padding">
      <div class="grid col-4 grid-square">
        <div class="bg-img tien-col" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></div>
        <div class="bg-img tien-col" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></div>
        <div class="bg-img tien-col" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></div>
        <div class="bg-img tien-col" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></div>
      </div>
    </div>


    <div class="tien-bar bg-white margin-top">
      <div class='action'>
        <h2>辅助布局</h2>
      </div>
    </div>
    <div class="tien-bar bg-white border-bottom">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>浮动
      </div>
      <div class='action'></div>
    </div>
    <div class="bg-white padding">
      <div class=" cf padding-sm">
        <div class='bg-grey radius fl padding-sm'>ColorUi fl</div>
        <div class='bg-grey radius fr padding-sm'>ColorUi fr</div>
      </div>
    </div>


    <div class="tien-bar bg-white margin-top">
      <div class='action'>
        <h2>边距</h2>
      </div>
    </div>
    <div class="tien-bar bg-white  border-bottom">
      <div class='action'>
        <span class='tien-icon-title text-blue'></span>内外边距
      </div>
    </div>
    <div class="bg-white">
      <div class='padding bg-gray'>{size}的尺寸有xs/sm/df/lg/xl</div>
      <div class='flex flex-wrap padding border-top'>
        <div class="basis-df padding-bottom-xs">外边距</div>
        <div class="basis-df padding-bottom-xs">内边距</div>
        <div class="basis-df">.margin-{size}</div>
        <div class="basis-df">.padding-{size}</div>
      </div>
      <div class='flex flex-wrap padding border-top'>
        <div class="basis-df padding-bottom-xs">水平方向外边距</div>
        <div class="basis-df padding-bottom-xs">水平方向内边距</div>
        <div class="basis-df">.margin-lr-{size}</div>
        <div class="basis-df">.padding-lr-{size}</div>
      </div>
      <div class='flex flex-wrap padding border-top'>
        <div class="basis-df padding-bottom-xs">垂直方向外边距</div>
        <div class="basis-df padding-bottom-xs">垂直方向内边距</div>
        <div class="basis-df">.margin-tb-{size}</div>
        <div class="basis-df">.padding-tb-{size}</div>
      </div>
      <div class='flex flex-wrap padding border-top'>
        <div class="basis-df padding-bottom-xs">上外边距</div>
        <div class="basis-df padding-bottom-xs">上内边距</div>
        <div class="basis-df">.margin-top-{size}</div>
        <div class="basis-df">.padding-top-{size}</div>
      </div>
      <div class='flex flex-wrap padding border-top'>
        <div class="basis-df padding-bottom-xs">右外边距</div>
        <div class="basis-df padding-bottom-xs">右内边距</div>
        <div class="basis-df">.margin-right-{size}</div>
        <div class="basis-df">.padding-right-{size}</div>
      </div>
      <div class='flex flex-wrap padding border-top'>
        <div class="basis-df padding-bottom-xs">下外边距</div>
        <div class="basis-df padding-bottom-xs">下内边距</div>
        <div class="basis-df">margin-bottom-{size}</div>
        <div class="basis-df">.padding-bottom-{size}</div>
      </div>
      <div class='flex flex-wrap padding border-top'>
        <div class="basis-df padding-bottom-xs">左外边距</div>
        <div class="basis-df padding-bottom-xs">左内边距</div>
        <div class="basis-df">.margin-left-{size}</div>
        <div class="basis-df">.padding-left-{size}</div>
      </div>
    </div>
  </f7-page>
</template>

<script>
export default {}
</script>